<template>
	<view>
		<view class="top">
			<view class="icon">
				<view class="list" @click="toPage('message')">
					<u-badge :offset="[-5,-5]" type="error" v-if="lingdang_count" :isDot="true"></u-badge>
					<image src="../../static/image/u2.png" mode=""></image>
				</view>
				<view @click="toPage('/pages/htmlA/setting/index')" class="list" style="margin-left: 51rpx;">
					<image src="../../static/image/u3.png" mode=""></image>
				</view>
			</view>
			<view class="user">
				<view class="head" @click="toPage('/pages/htmlA/setting/basic')">
					<image :src="getHead(user.head_img)" mode=""></image>
				</view>
				<view class="experience">
					<view class="name" @click="toPage('/pages/htmlD/experience/index')">
						<view class="nickname omit">
							{{user.nickname}}
						</view>
						<image :src="img_pre+info.grade_manor_logo" mode=""></image>
					</view>
					<view class="item">
						<view class="icon_number">
							<image src="../../static/image/u20.png" mode=""></image>
							<text>贡献度</text>
							130
						</view>
					</view>
				</view>
				<view @click="toPage('/pages/htmlC/integral/index')" class="credit">
					<!-- 		<view @click="toast('暂未开放')" class="credit"> -->
					<view class="number">
						<view class="view">
							{{info.credit_score}}
						</view>
					</view>
					<view class="text">
						{{info.credit_grade}}
					</view>
				</view>
			</view>
			<view class="card" @click="toPage('/pages/htmlB/vip/index')" v-if="info.vip_status==0">
				<view class="left">
					<image src="../../static/image/vip.png" mode=""></image>蜂盈会员卡
				</view>
				<view class="button">
					产出增加 <text>2%</text> >
				</view>
			</view>
			<view class="card2" @click="toPage('/pages/htmlB/vip/index?state=1')" v-else>
				<view class="left">
					<image src="../../static/image/vip3.png" mode=""></image>蜂盈会员卡
				</view>
				<view class="button">
					{{info.vip_type==1?'周卡':'月卡'}}剩余 <text>{{info.vip_day_number}}</text>天到期 >
				</view>
			</view>
		</view>
		<view class="content">
			<view class="up">
				<view class="list" :style="(index+1)%list1.length==0?'margin-right: 0;':''"
					@click="toPage(item.url,item.toast)" v-for="(item,index) in list1" :key="index">
					<view class="img">
						<image :src="'../../static/image/'+item.img+'.png'" mode=""></image>
					</view>
					<view class="right">
						<view class="number">
							{{item.number}}
						</view>
						<view class="text">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="down">
				<view class="title">
					<view class="name">
						我的蜂巢
					</view>
				</view>
				<view class="list">
					<view class="d">
						<view class="l1" @click="toPage('/pages/htmlB/seed/list')">
							<u-badge :offset="[15,15]" type="error" v-if="guozhong_count" :isDot="true"></u-badge>
							<image src="../../static/image/u9.png" mode=""></image>
						</view>
						<view class="l1" @click="toPage('/pages/htmlB/my/index?current='+index)"
							v-for="(item,index) in list2" :key="index">
							<view class="name">
								{{item.number}}
							</view>
							<view class="text">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="title">
					<view class="name">
						我的服务
					</view>
				</view>
				<view class="list">
					<view class="d">
						<view class="l2" v-if="item.show" @click="toPage(item.url,item.toast)"
							v-for="(item,index) in list3" :key="index">
							<image :src="'../../static/image/'+item.img+'.png'" mode=""></image>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="list" @click="toPage('/pages/htmlD/sign/index')" style="background:#FFEEE1 ;">
				<view class="left">
					<image src="../../static/image/u14.png" mode=""></image>
				</view>
				<view class="right" style="color: #FB683D;">
					<view class="name">
						签到
					</view>
					<view class="text">
						每日签到有惊喜
					</view>
				</view>
			</view>
			<view class="list" style="margin-right: 0; background:#EAEDF9 ;"
				@click="toPage('/pages/htmlC/invitation/index')">
				<view class="left">
					<image src="../../static/image/u15.png" mode=""></image>
				</view>
				<view class="right">
					<view class="name" style="color: #205FFA;">
						邀请
					</view>
					<view class="text">
						邀请好友得好礼
					</view>
				</view>
			</view>
		</view>
		<u-tabbar height="100" v-model="current" :midButtonSize="midButtonSize" :show="true" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor"></u-tabbar>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list3: [{
						img: "u10",
						name: "邀请码",
						url: "/pages/htmlC/invitation/index",
						show: true
					}, {
						img: "u11",
						name: "商城订单",
						url: "/pages/user/list",
						show: true,
					}, {
						img: "u12",
						name: "地址设置",
						url: "/pages/htmlA/address/index",
						show: true
					},
					{
						img: "u13",
						name: "客服",
						url: "/pages/user/service",
						show: true
					},
					{
						img: "u11",
						name: "回收",
						url: "/pages/user/recycle",
						show: false
					}
				],
				list2: [{
					name: "当前持有",
					number: 0
				}, {
					name: "待产出",
					number: 0
				}, {
					name: "已产出",
					number: 0
				}],
				list1: [
				// 	{
				// 	img: "u6",
				// 	name: "金蜜",
				// 	number: "0",
				// 	url: "/pages/htmlB/gold/index"
				// },
				{
					img: "u7",
					name: "蜜贝",
					number: "0",
					url: "/pages/htmlB/farm/fruits"
				}, {
					img: "u8",
					name: "蜂钻",
					number: "0",
					url: "/pages/htmlE/diamond/index"
				}],
				current: 2,
				midButtonSize: "122",
				list: [{
						"pagePath": "/pages/index/index",
						iconPath: "../../static/image/index2.png",
						selectedIconPath: "../../static/image/index1.png",
						text: '每日',
						isDot: true,
						customIcon: false,
					},
					{
						"pagePath": "/pages/home/index",
						iconPath: "../../static/image/home1.png",
						selectedIconPath: "../../static/image/home1.png",
						text: '蜂盈优品',
						midButton: true,
						customIcon: false,
					},
					{
						"pagePath": "/pages/user/index",
						iconPath: "../../static/image/user2.png",
						selectedIconPath: "../../static/image/user1.png",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				midButton: true,
				inactiveColor: '#909399',
				activeColor: '#333333',
				info: {},
				lingdang_count: false,
				guozhong_count: false,
				user: {}

			}
		},
		onLoad(option) {
			than = this;
			if (option.type) {
				let type = parseInt(option.type);
				uni.setStorage({
					key: 'token',
					data: option.token,
					success: function() {
						switch (type) {
							case 1:
								than.toPage('/pages/htmlF/statistics/index?back=1')
								break;
							default:
								break;
						}
					}
				})
			}
		},
		onShow() {
			than.userSelf();
			uni.getStorage({
				key: 'user',
				success: function(e) {
					than.user = e.data;
				}
			})
			/* than.post("api/kmb/redPoint", null, function(data) {
				than.lingdang_count = data.lingdang_count == 0 ? false : true;
				than.guozhong_count = data.guozhong_count == 0 ? false : true;
			}) */
		},
		methods: {
			userSelf() {
				than.post("api/center/userSelf", null, function(data) {
					than.info = data;
					than.list1[0].number = data.guomi
					than.list1[1].number = data.fengzuan

					than.list2[0].number = data.now_hold
					than.list2[1].number = data.not_hold
					than.list2[2].number = data.ready_hold
					if (parseInt(data.super_power) == 1) {
						than.list3[4].show = true
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.bottom {
		display: flex;
		align-items: center;
		padding: 0 37rpx;
		margin-top: 50rpx;
		justify-content: center;

		.list {
			width: 330rpx;
			height: 180rpx;
			background-size: 100% 100%;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;

			.left {
				margin: 0 21rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.text {
				margin-top: 5rpx;
				color: #333333;
				font-size: 22rpx;
				font-family: PingFang SC;
			}
		}
	}

	page {
		background-color: #FAFAFA;
	}

	.content {
		.up {
			margin: 80rpx 36rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			border-radius: 10rpx;

			.list {
				display: flex;
				align-items: center;
        background: #FFFFFF;
				width: 327rpx;
				height: 145rpx;
				margin-right: 12rpx;
				border-radius: 10rpx;

				.img {
					margin: 0 23rpx 0 14rpx;

					image {
						width: 74rpx;
						height: 74rpx;
					}
				}

				.right {
					margin-right: 20rpx;
					text-align: right;

					.number {
						font-size: 44rpx;
						line-height: 1;
					}

					.text {
						font-size: 26rpx;
						color: #333333;
					}
				}
			}
		}

		.down {
			.title {
				margin-top: 25rpx;
				padding: 0 35rpx;
				background: #FAFAFA;
				height: 90rpx;
				display: flex;
				align-items: center;

				.name {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.text {
					margin-left: auto;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #999999;
				}
			}

			.list {
				background: #FFFFFF;
				width: 678rpx;
				border-radius: 12rpx;
				margin: 0 auto 0;

				.d {
					display: flex;
					align-items: center;
					height: 167rpx;
					border-radius: 12rpx;

					.l1 {
						width: 25%;
						text-align: center;
						padding-top: 20rpx;
						position: relative;

						.name {
							font-size: 36rpx;
							font-weight: bold;
							color: #1B1B1D;
							margin-bottom: 10rpx;
						}

						image {
							width: 128rpx;
							height: 125rpx;
						}

						.text {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #9A9A9A;
						}
					}

					.l2 {
						width: 25%;
						text-align: center;

						.name {
							line-height: 1;
							font-size: 26rpx;
							font-weight: bold;
							color: #333333;
						}

						image {
							margin-bottom: 19rpx;
							width: 73rpx;
							height: 70rpx;
						}
					}
				}
			}
		}
	}

	.top {
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef H5 */
		padding-top: 60rpx;
		/* #endif */
		height: 400rpx;
		position: relative;
		background-image: url(../../static/image/u0.png);
		background-size: 100% 100%;
		border-radius: 0px 0px 0px 40rpx;

		.card2 {
			width: 678rpx;
			height: 80rpx;
			background: #FDF4ED;
			border-radius: 40px;
			margin: 40rpx auto 0;
			border-radius: 40rpx;
			position: relative;
			background-image: url(../../static/image/vip2.png);
			background-size: 100% 100%;
			display: flex;
			align-items: center;

			.go {
				position: absolute;
				width: 24rpx;
				height: 25rpx;
				right: 26rpx;
				top: 62rpx;
			}

			.up {
				display: flex;
				align-items: center;
				height: 74rpx;
				padding: 0 22rpx;

				.text {
					margin: 0;

				}

				.long {
					width: 1rpx;
					height: 30rpx;
					margin: 0 20rpx;
					background: #C3C1BE;
				}
			}

			.down {
				padding: 0 22rpx;
				display: flex;
				align-items: center;
				height: 74rpx;

				.doct {

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #EBCE96;

					text {
						color: #FFECC3;
					}
				}
			}

			.left {
				padding-left: 23rpx;
				display: flex;
				align-items: center;

				image {
					width: 69rpx;
					height: 69rpx;
				}

				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #EED090;
				display: flex;
				align-items: center;

				image {
					margin-left: 13rpx;
					width: 88rpx;
					height: 32rpx;
				}
			}


			.button {
				margin-left: auto;
				margin-right: 24rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;

				text {
					font-size: 28rpx;
					font-family: Myriad Pro;
					font-weight: bold;
					color: #F9B721;
					margin: 0 14rpx 0 8rpx;
				}

				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

		.card {
			width: 678rpx;
			height: 80rpx;
			background: #FDF4ED;
			border-radius: 40px;
			margin: 40rpx auto 0;
			border-radius: 40rpx;
			position: relative;
			display: flex;
			align-items: center;

			.go {
				position: absolute;
				width: 24rpx;
				height: 25rpx;
				right: 26rpx;
				top: 62rpx;
			}

			.up {
				display: flex;
				align-items: center;
				height: 74rpx;
				padding: 0 22rpx;

				.text {
					margin: 0;

				}

				.long {
					width: 1rpx;
					height: 30rpx;
					margin: 0 20rpx;
					background: #C3C1BE;
				}
			}

			.down {
				padding: 0 22rpx;
				display: flex;
				align-items: center;
				height: 74rpx;

				.doct {

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #EBCE96;

					text {
						color: #FFECC3;
					}
				}
			}

			.left {
				padding-left: 23rpx;
				display: flex;
				align-items: center;

				image {
					width: 69rpx;
					height: 69rpx;
				}

				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #EED090;
				display: flex;
				align-items: center;

				image {
					margin-left: 13rpx;
					width: 88rpx;
					height: 32rpx;
				}
			}

			.text {
				margin-top: 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;

				text {

					font-size: 30rpx;
					font-weight: bold;
					color: #03E380;
				}
			}


			.right {}

			.button {
				margin-left: auto;
				margin-right: 24rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;

				text {
					font-size: 28rpx;
					font-family: Myriad Pro;
					font-weight: bold;
					color: #E8464E;
					margin: 0 14rpx 0 8rpx;
				}

				display: flex;
				align-items: center;
				justify-content: center;
			}


		}

		.icon {
			display: flex;
			height: 100rpx;
			align-items: center;
			padding: 0 36rpx;

			.list {
				margin-left: auto;
				position: relative;

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.user {
			padding: 0 36rpx;
			display: flex;
			align-items: center;

			.head {
				width: 160rpx;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border-radius: 50%;

				image {
					border-radius: 50%;
					width: 155rpx;
					height: 155rpx;
				}
			}

			.credit {
				width: 139rpx;
				height: 158rpx;
				margin-left: auto;
				background: #EDF3FF;
				border-radius: 20rpx;

				.number {

					background-image: url(../../static/image/u1_1.png);
					background-size: 100% 100%;
					margin: 11rpx auto 18rpx;
					width: 106rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.view {
						margin-top: 15rpx;
						font-size: 36rpx;
						font-family: Myriad Pro;
						font-weight: bold;
						color: #13AB7C;
					}
				}

				.text {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-align: center;
				}
			}

			.experience {
				margin-left: 32rpx;
				color: #FFFFFF;

				.name {
					font-size: 41rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #181818;
					display: flex;
					align-items: center;

					.nickname {
						max-width: 160rpx;
					}

					image {
						width: 148rpx;
						height: 45rpx;
						margin-left: 11rpx;
					}
				}


				.item {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					image {
						margin-top: -10rpx;
						width: 48rpx;
						height: 53rpx;
						margin-right: 9rpx;
					}


					.icon_number {
						display: flex;
						align-items: center;
						color: #F66337;
						font-size: 36rpx;
						font-family: Myriad Pro;
						font-weight: bold;

						image {
							margin-top: 3rpx;
							width: 27rpx;
							height: 27rpx;
						}

						height: 50rpx;
						background: #F3F9F9;
						border-radius: 40rpx;
						padding: 0 14rpx;

						text {
							font-size: 25rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							padding-right: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
